<html>
<head>
<title>Vinil de Queijo</title>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>

	 
	  <div id="ytapiplayer">
		You need Flash player 8+ and JavaScript enabled to view this video.
	  </div>

	  <script type="text/javascript">
	  	var lista = new Array();
	  	var indiceAtual = 0;
		var ytplayer;
		var params = { allowScriptAccess: "always" };
		var atts = { id: "myytplayer" };

		lista.push("gWysgJINbA4");
		lista.push("4g7rKQV9SkE");
		lista.push("iG11w2_jaIA");
		lista.push("jqtpHSx0cj8");
		lista.push("J3tEi5bHdSQ");
		
		swfobject.embedSWF("http://www.youtube.com/v/gWysgJINbA4&enablejsapi=1&playerapiid=ytplayer&autoplay=1&rel=0", 
						   "ytapiplayer", "425", "356", "8", null, null, params, atts);
		
		function onYouTubePlayerReady(playerId) {
			//alert("ready");
			ytplayer = document.getElementById("myytplayer");
			ytplayer.addEventListener("onStateChange", "statusAlterado");
		}

		function statusAlterado(newState) {
			//alert(newState);
			if(parseInt(newState)==0){//acabou o video
				proximo();
			}
		}
		function cadastrar(f){
			var codigo = f.codigo.value;
			var inicio="http://www.youtube.com/v/";
			var fim="&";
			var i = codigo.indexOf(inicio);
			if(i!=-1){//achou o inicio
				var fim = codigo.indexOf(fim,i);
				if(fim!=-1){
					var videoId = codigo.substring(i+inicio.length,fim); 
					lista.push(videoId);
					//TODO descobrir como pegar o nome do video
					$("#lista").append("<li id=\""+videoId+"\"><a href=\"#\" onclick=\"return play('"+videoId+"')\">"+videoId+"</a></li>");
					salvarAjax(videoId);
				}
			}
			
			return false;
		}
		function salvarAjax(videoId){
			$.ajax({
				type: "POST",
				url: "incluirVideo.php",
				data: "videoId=" + videoId,
				success: function(msg){
					alert( "Data Saved: " + msg );
				}
			});
		}
		function play(videoId){
			ytplayer.loadVideoById(videoId);
			marcar(videoId);
			//procurar o i atual
			for(i=0;i<lista.length;i++){
				if(lista[i]==videoId){
					indiceAtual = i+1;
					break;
				}
			}
			return false;
		}
		function carregarLista(){
			var ul = document.getElementById("lista");
			var i;
			for(i=0;i<lista.length;i++){
				var videoId = lista[i];
				$("#lista").append("<li id=\""+videoId+"\"><a href=\"#\" onclick=\"return play('"+videoId+"')\">"+videoId+"</a></li>");
			}
		}
		function marcar(videoId){
			var ul = document.getElementById("lista");
			var lis = ul.getElementsByTagName("li");
			for(var i=0;i<lis.length;i++){
				lis[i]["style"].backgroundColor="#fff";
			}
			var li = document.getElementById(videoId);
			li["style"].backgroundColor="#eee";
		}
		function proximo(){
			ytplayer.loadVideoById(lista[indiceAtual]);
			marcar(lista[indiceAtual]);
			indiceAtual++;
		}
		$(document).ready(carregarLista);
	  </script>
	<!--
	<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/iG11w2_jaIA&hl=pt_BR&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/iG11w2_jaIA&hl=pt_BR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
	<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/jqtpHSx0cj8&hl=pt_BR&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/jqtpHSx0cj8&hl=pt_BR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
	<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/4g7rKQV9SkE&hl=pt_BR&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4g7rKQV9SkE&hl=pt_BR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
	<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/gWysgJINbA4&hl=pt_BR&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/gWysgJINbA4&hl=pt_BR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
	<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/oiIVSEkLBZw&hl=pt_BR&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/oiIVSEkLBZw&hl=pt_BR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
	-->
	<form onsubmit="return cadastrar(this)">
		<textarea name="codigo" rows="5" cols="40"></textarea>
		<input type="submit" value="Cadastrar">
	</form>
	<a href="javascript: proximo()">Pr&oacute;ximo</a>
	<ul id="lista"></ul>
</body>
</html>
